<template>
	<view class="barnd">
		<view class="brand-top">品牌介绍</view>
		<view class="brand-content">
			<image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/creator/202408071053055566.png" mode="aspectFill" class="brand-img"></image>
			<view class="brand-right">
				<view class="brand-title">
					<view class="title" >{{brand}}</view>
					<image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/mengchong/details-arrow-right.png"
						class="brand-right-arrow"></image>
				</view>
				<view class="brand-labels" :id="attrs.id">
					<image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/creator/202408071117189139.png" class="brand-yes"></image>
					<view class="brand-labels-item">24小时营业</view>
					<image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/creator/202408071117189139.png" class="brand-yes"></image>
					<view class="brand-labels-item">大型手术</view>
					<image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/creator/202408071117189139.png" class="brand-yes"></image>
					<view class="brand-labels-item">宠物医疗</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref,
		onMounted
	} from 'vue';
	
	import { useAttrs } from 'vue'
	
	const attrs = useAttrs()
	
	import sheep from '@/sheep';
	
	const props = defineProps({
		data:{
			type:Object,
			default:{},
		},
		brand:{
			type:String,
			default:"",
		},
	})
</script>

<style lang="scss" scoped>
.barnd{
		background: #red;
		height:240rpx;
		width:calc(100% - 32rpx);
		padding:10rpx;
		margin-left:16rpx;
		margin-right:16rpx;
		font-family: Source Han Sans;
		
		.brand-top{
			height:34rpx;
			width:100%;
			font-size: 24rpx;
			line-height:80rpx;
			font-weight: bold;
			color: #3D3D3D;
			display:flex;
			justify-content: flex-start;
			align-items: flex-end;
			
		}
		.brand-content{
			height:160rpx;
			display:flex;
			justify-content: space-between;
			align-items: center;
			background:#ffffff;
			padding:20rpx 10rpx;
			.brand-img{
				width:139rpx;
				height:139rpx;
				
			}
			.brand-right{
				width:calc(100% - 149rpx);
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
				height:139rpx;
				margin-left:10rpx;
				.brand-title{
					width:100%;	
					display:flex;
					justify-content: space-between;
					align-items: center;
					margin-top:20rpx;
					.title{
						font-size: 24rpx;
						font-weight: bold;
						color: #3D3D3D;
					}
					.brand-right-arrow{
						width:20rpx;
						height:20rpx;
						margin-right:20rpx;
					}
				}
				.brand-labels{
					margin-bottom:20rpx;
					display:flex;
					justify-content: flex-start;
					align-items:center;
					.brand-yes{
						width:30rpx;
						height:30rpx;
						margin-left:6rpx;
					}
					.brand-labels-item{
						font-size: 24rpx;
						font-weight: 300;
						line-height: normal;
						color: #3D3D3D;
						margin-left:10rpx;
					}
				}
			}
		}
	}
</style>
